<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device === 'mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
  
    <sidebar class="sidebar-container" @showlogin="showLogin" @changeGroupId="changeGroupId" />

    <div :class="{'fixed-header':fixedHeader, 'mobile': device === 'mobile'}">
      <navbar @showUserInfo="showUserInfo" @showlogin="showLogin" />
    </div>
    <div class="main-container" :class="{'mobile': device === 'mobile'}">
      <Main ref="main" @showlogin="showLogin" @showUserInfo="showUserInfo" />
    </div>
    <login :qrcode="loginQrcode" @close="closeLogin" />
    <userinfo v-if="userinfoShow" @close="closeUserInfo" @showlogin="showLogin" @showVip="showVip" @showGoods="showGoods"></userinfo>
    <vip v-if="vipShow" @close="closeVip" @showlogin="showLogin"></vip>
    <goods v-if="goodsShow" @close="closeGoods" @showlogin="showLogin"></goods>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getLoginQrcode, loginCheck } from '@/api/login'
import { setToken, setSiteCode } from '@/utils/auth'
import { Navbar, Sidebar, Login, Main, Userinfo, Vip, Goods } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
  name: 'Index',
  components: { Navbar, Sidebar, Login, Main, Userinfo, Vip, Goods },
  mixins: [ResizeMixin],
  data() {
    return {
      loginQrcode: '',
      loginSi: 0,
      groupid: 0,
      userinfoShow: false,
      vipShow: false,
      goodsShow: false
    }
  },
  computed: {
    ...mapGetters([
      'page_title',
      'copyright'
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        mobile: this.device === 'mobile' && this.sidebar.opened,
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation
      }
    }
  },
  created() {
    const sitecode = window.location.search.substr(1, 4)
    setSiteCode(sitecode)
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    showLogin() {
      if (this.loginQrcode) {
        return
      }
      getLoginQrcode().then(res => {
        this.loginQrcode = res.data.qrcode
        this.loginSi = setInterval(() => {
          loginCheck({
            code: res.data.code
          }).then(res => {
            if (res.data.login) {
              this.$message({
                message: res.message,
                type: 'success',
                duration: 1500
              })
              setToken(res.data.token)
              window.location.reload()
            }
          })
        }, 3000)
      })
    },
    closeLogin() {
      this.loginQrcode = ''
      if (this.loginSi) {
        clearInterval(this.loginSi)
      }
    },
    changeGroupId(group_id) {
      this.$refs.main.setGroupId(group_id)
    },
    showUserInfo() {
      this.$store.dispatch('user/getInfo').then(res => {
        this.userinfoShow = true
      }).catch(res => {
        if (res.errno === 403) {
          this.showLogin()
        }
      })
    },
    closeUserInfo() {
      this.userinfoShow = false
    },
    showVip() {
      this.vipShow = true
    },
    closeVip() {
      this.vipShow = false
    },
    showGoods() {
      this.goodsShow = true
    },
    closeGoods() {
      this.goodsShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar{
    position: fixed;
    top: 0;
  }
  /*.main-container {
    padding-bottom: 40px;
  }*/
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.mobile.fixed-header {
  width: 100% !important;
}
.fixed-copyright {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
  height: 40px;
  background-color:#fff;
  padding: 0 20px;
  line-height: 40px;
  border-top: 1px solid #eee;
}

</style>
